<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8">
    <title>主机管理</title>
    <link href="__PUBLIC__/layui/css/layui.css" rel="stylesheet" />
</head>

<body>
<div class="admin-main">
    <blockquote class="layui-elem-quote">
        <button  class="layui-btn layui-btn-small add">
            <i class="layui-icon">&#xe608;</i> 添加主机
        </button>
        <a href="#" class="layui-btn layui-btn-small" id="batchdata">
            <i class="layui-icon" aria-hidden="true">&#x1007;</i> 批量处理操作
        </a>
        <a href="#" class="layui-btn layui-btn-small" id="batchExtranet">
            <i class="layui-icon" aria-hidden="true">&#xe64c;</i>批量ip与主机绑定
        </a>
    </blockquote>
    <fieldset class="layui-elem-field">
        <legend>站点列表</legend>
        <div class="layui-field-box">
            <table class="layui-table site-table">
                <thead>
                <tr>
                    <th><input name="sortnum" type="checkbox" id="selected-all">id</th>
                    <th>服务商</th>
                    <th>地域</th>
                    <th>型号</th>
                    <th>配置</th>
                    <td>镜像名称</td>
                    <th>创建时间</th>
                    <th>浮动ip</th>
                    <th>账号/密码</th>
                    <th>IP与主机状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="listcontent">
                </tbody>
            </table>
        </div>
    </fieldset>
    <div class="admin-table-page">
        <div id="page" class="page">
        </div>
    </div>
</div>
<script id="demo" type="text/html">
    <tr>
        <td><input name="sortnum" type="checkbox" value="{{d.keyid }}" date-status="{{d.linkExtranet}}">{{d.id}}</td>
        <td>{{d.servername}}</td>
        <td>{{d.zone}}</td>
        <td>{{d.instanceType}}</td>
        <td>{{d.cpu}}核/{{d.sdk}}</td>
        <td>{{d.img_name}}</td>
        <td>{{d.createtime}}</td>
        <td>{{d.ip}}</td>
        <td><span style="color: #99701F; font-size: 16px;">root</span><br/>{{d.password}}</td>
        <td>{{#if(d['linkExtranet'] == 0){}}未绑定{{#}else{ }}已绑定{{#} }}</td>
        <td>
           <!-- <a data="{{d.keyid}}" class="layui-btn layui-btn-mini layui-btn-normal edit"><i class="layui-icon">&#xe642;</i>编辑</a>-->
            <a  data="{{d.keyid}}" class="layui-btn layui-btn-danger layui-btn-mini del"><i class="layui-icon">&#xe640;</i>删除</a>
        </td>
    </tr>
</script>
<script type="text/javascript" src="__PUBLIC__/layui/layui.js"></script>
<script>
    var form,layer,$,laytpl;
    layui.config({
        base: '__PUBLIC__/layui/modules/'
    });
    var hostaddurl="{:U('MyService/hostadd')}";
    var batchdelurl="{:U('MyService/batchdel')}";
    var batchlinkurl="{:U('MyService/batchLink')}";
    var finddelurl="{:U('MyService/onedel')}";
    layui.use(['layer','icheck','laydate', 'form','laypage','laytpl'], function () {
        var laypage = layui.laypage;
        laytpl = layui.laytpl;
        form = layui.form();
        $ = layui.jquery;
        laydate = layui.laydate;
        layer=layui.layer;
        var pagelistdate;
        var curr;
        form.render();
        $('input').iCheck({
            checkboxClass: 'icheckbox_flat-green'
        });
        //ichecklist();
        laypage({
            cont: 'page',
            pages: {$page} //总页数
            ,
            groups: 5 //连续显示分页数
            ,
            jump: function(obj, first) {
                curr = obj.curr;
                listcontent.innerHTML='';
                $.ajax({
                    type: "GET",
                    url: "",
                    data: { p:curr},
                    async: false,
                    success: function(date){
                        if(date['code']==101) {
                            pagelistdate =date.data;
                            var getTpl = demo.innerHTML;
                            layui.each(date.data, function (k, v) {
                                v.id=k+1;
                                laytpl(getTpl).render(v, function (html) {
                                    listcontent.innerHTML += html;
                                });
                            });
                        }else{
                            listcontent.innerHTML='';
                        }
                    }
                });
                caozuo();
                ichecklist();
            }
        });

        $('.add').click(function(){
            $.get(hostaddurl,function(data){
                if(data.code == '4001'){
                    layer.msg(data.msg,{icon: 5});
                    return;
                }
                layer.open({
                    title:'添加主机',
                    type: 1,
                    skin: 'layui-layer-rim',
                    area: ['550px','600px'],
                    content: data
                });
            });
        });
        //批量处理
        $('#batchdata').on('click', function() {
            var pidvalue = "";
            var i=0;
            $('input[name="sortnum"]:checked').each(function() {
                pidvalue += $(this).val() + ','
                i=1;
            });
            if(i==1){
                site="{$_GET['site']}";
                status="{$_GET['status']}";
                layer.confirm('确认批量删除主机吗？', {
                    btn: ['删除', '取消'] //可以无限个按钮
                }, function(index, layero){
                    $.post(batchdelurl, {'ids':pidvalue,'p':curr}, function(data){
                        if(data.code=="4001"){
                            layer.msg(data.msg,{icon: 5,time: 2000});
                        }else if(data.code == "101"){
                            layer.msg(data.msg, {
                                icon: 6,
                                time: 2000
                            }, function(){
                                location.reload();
                            });
                        }else{
                            layer.msg("未知错误",{icon: 5,time: 2000});
                        }
                    });
                });
            }else{
                layer.msg("请勾选",{icon: 5});
            }
        });
        $('#batchExtranet').on('click', function() {
            layer.confirm('确定批量绑定所有未绑定机器？', {
                btn: ['确定', '取消']
            }, function(index, layero) {
                loadsconrent = layer.load(1, {shade: [0.8, '#393D49'], time: 1000000, area: ['100px', '100px']});
                $.post(batchlinkurl,'',function (data) {
                    if (data.code == "4001") {
                        layer.msg(data.msg, {icon: 5, time: 2000});
                    } else if (data.code == "101") {
                        layer.msg(data.msg, {
                            icon: 6,
                            time: 2000
                        }, function () {
                            location.reload();
                        });
                    } else {
                        layer.msg("未知错误", {icon: 5, time: 2000});
                    }
                    layer.close( loadsconrent );
                });
            });
        });
        function ichecklist() {
            $('input').iCheck({
                checkboxClass: 'icheckbox_flat-green'
            });
            $('.site-table tbody tr').on('click', function (event) {
                var $this = $(this);
                var $input = $this.children('td').eq(0).find('input');
                $input.on('ifChecked', function (e) {
                    $this.css('background-color', '#EEEEEE');
                });
                $input.on('ifUnchecked', function (e) {
                    $this.removeAttr('style');
                });
                $input.iCheck('toggle');
            }).find('input').each(function () {
                var $this = $(this);
                $this.on('ifChecked', function (e) {
                    $this.parents('tr').css('background-color', '#EEEEEE');
                });
                $this.on('ifUnchecked', function (e) {
                    $this.parents('tr').removeAttr('style');
                });
            });
            $('#selected-all').on('ifChanged', function (event) {
                var $input = $('.site-table tbody tr td').find('input');
                $input.iCheck(event.currentTarget.checked ? 'check' : 'uncheck');
            });
        }

        function caozuo(){
            $('.del').click(function () {
                var id = $(this).attr('data');
                var _this=$(this);

                $.get(finddelurl, {keyid: id}, function (data) {
                    if (data.code == '4001') {
                        layer.msg(data.msg, {icon: 5});
                    }else if(data.code == '101'){
                        _this.parent().parent().remove();
                        layer.msg(data.msg, {icon: 6});
                    }else{
                        layer.msg(data.msg, {icon: 5});
                    }
                });
            });
        }
    });
</script>
</body>

</html>